<template>
    <div class="base-input">
        <el-button slot="append" style="display: block; text-indent: 2px" icon="iconfont rbp-input_language" @click="showlg" />
        <el-dialog
            class="LanguageDialog"
            width="500px"
            :title="$t('commonWord.information')"
            :append-to-body="true"
            :show-close="false"
            :close-on-click-modal="false"
            :visible.sync="showMoreLanguage"
        >
            <el-form>
                <template v-for="item in Languages">
                    <el-form-item v-if="Lang !== item['code']" :key="item['code']" :label="item.name">
                        <el-input
                            v-model="languageInputBox[item['code']]"
                            :disabled="disabled"
                            clearable
                            size="mini"
                            :placeholder="$t('form.placeholder.input', { msg: '' })"
                        />
                    </el-form-item>
                </template>
            </el-form>
            <template slot="footer">
                <div class="LanguageDialog-footer">
                    <el-button size="medium" @click="showMoreLanguage = false">
                        {{ $t('commonWord.cancel') }}
                    </el-button>
                    <el-button v-if="!disabled" size="medium" type="primary" @click="saveLanguages">
                        {{ $t('commonWord.confirm') }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'lang-input'
})

/**
 * @param type = 表单类型
 * @param value = 传入值
 * @param long = 使用长表单
 * @param disabled = 是否禁用
 * @param inputProps = 基础属性
 * @param icon = 多语言图标
 * @param moreLanguage = 是否多语言
 * @param Languages = 多语言列表
 * @method change = 值改变时触发
 * */
export default class baseSelect extends Vue {
    @Prop() value: string;
    @Prop({ required: true }) contentKeys: string;
    @Prop({ required: true }) formData: any;
    @Prop({ required: true }) disabled;
    showMoreLanguage: boolean = false; // 默认不打开多语言框
    // Languages: any =[] // 多语言列表
    languageInputBox: object = Object.create(null); // 多语言的内容
    moreLanguage: boolean = false;
    // 数组
    get Languages() {
        return this.$store.state.app.LanguageTypeList;
    }
    // 当前语言
    get Lang() {
        return this.$store.state.app.language;
    }
    @Watch('value', { immediate: true })
    onValueChange(val) {
        // console.log('lang-input val', val)
        if (val) {
            this.$set(this.languageInputBox, this.Lang, val);
            // this.$nextTick(() => {
            //   this.saveLanguages()
            // })
        }
    }
    // 打开多语言配置框
    showlg() {
        try {
            if (Object.keys(this.formData).includes('languageMap') && this.formData['languageMap']) {
                const target = this.formData['languageMap'][this.contentKeys];
                if (target) {
                    this.Languages.forEach((em) => {
                        this.$set(this.languageInputBox, em.code, target[em.code]);
                    });
                } else {
                    // 初始化
                    this.languageInputBox = Object.create(null);
                }
            } else {
                //   this.c_formData['languageMap'] = Object.create(null)
                this.$set(this.formData, 'languageMap', Object.create(null));
                this.languageInputBox = Object.create(null);
            }
        } catch (e) {
            this.$message.error(`多语言脚本解析错误:${e}`);
        }
        this.showMoreLanguage = true;
    }
    // 保存多语言
    saveLanguages() {
        try {
            //   let languageMap = {}
            //   // 检验formData 有没有这字段
            if (!Object.keys(this.formData).includes('languageMap') || !this.formData['languageMap']) {
                // 获取语言键名
                this.$set(this.formData, 'languageMap', {});
            }
            //   languageMap[this.contentKeys] = Object.create(null)
            if (!this.formData['languageMap'][this.contentKeys]) {
                this.$set(this.formData['languageMap'], this.contentKeys, {});
            }
            this.Languages.forEach((item) => {
                // 因为这里有没有填需要用当前系统值赋值
                // languageMap[this.contentKeys][item.code] = this.languageInputBox[item.code]
                this.$set(this.formData['languageMap'][this.contentKeys], item.code, this.languageInputBox[item.code] || this.value);
            });
        } catch (e) {
            this.$message.error(`js脚本错误:${e}`);
        }
        this.showMoreLanguage = false;
    }
    // 插入多语言
    insert(value) {
        this.$set(this.languageInputBox, this.Lang, value);
        console.log(this.languageInputBox);
    }
}
</script>

<style lang="scss">
.moreLanguage {
    .el-input-group__append {
        border: none !important;
        background: #f5f9ff !important;
    }
}

.LanguageDialog {
    .el-dialog__body {
        padding: 10px 20px;
        font-size: 12px;
        .el-form-item {
            display: flex !important;
            flex-direction: column !important;
            margin-bottom: 10px;
            label {
                text-align: left;
                font-weight: bold;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
    .el-dialog__footer {
        padding: 10px !important;
    }
}
</style>
